<template>
	<view class="OuterBg">
		<view class="OuterBox">
			<view class="editroleBox">
				
				<view class="exam_line u-flex-between">
					<view class="shead_tit  irequired">
						名称
					</view>
					<view class="input_Arae">
						<input type="text" :placeholder="placeholder" v-model.trim="role_name" maxlength="8">
					</view>
				</view>
				
				<view class="exam_line u-flex-between">
					<view class="shead_tit  irequired">
						选择员工
					</view>
					<view class="left u-flex-center" @click="SreenClick" style="">
						<view class="mr-10 text-gray">
							请选择
						</view>
						<view class="u-flex">
							<u-icon name="arrow-down-fill" color="#fd7400" size="24"></u-icon>
						</view>
					</view>
					<!-- <MultipleSelect :selectList="selectActive" :selectData="selectData" @change="multipleChange"></MultipleSelect> -->
				</view>
				<view class="tags" v-if="selectActive.length > 0">
					<view class="item"
						v-for="(item, index) in selectActive">
						<text>{{ item }}</text>
						<text class="dels" @click="delsVal(item,index)"></text>
					</view>
				</view>
				
				<view class="text-gray mb-10">
					功能权限
				</view>
				
				<view class="u-flex-end" >
					<view class="cus-blue-btn" @click="go1">
						权限
					</view>
					<view class="cus-blue-btn" @click="go2" style="margin-left: 10px;">
						移动权限
					</view>
				</view>
				<!-- <view class="OuterTemplate">
					<view class="exam_line u-flex-between">
						<view class="shead_tit  irequired">
							名称
						</view>
						<view class="input_Arae">
							<input type="text" :placeholder="placeholder" v-model.trim="role_name" maxlength="8">
						</view>
					</view>
					<view class="exam_line u-flex-between">
						<view class="shead_tit  irequired">
							选择员工
						</view>
						<MultipleSelect :selectList="empList" :selectData="selectData" @change="multipleChange"></MultipleSelect>
					</view>
				</view> -->
				<!-- <view class="" style="padding: 10px 22px;">
					<view class="text-gray mb-10">
						功能权限
					</view>
					<view class="u-flex-end" >
						<view class="cus-blue-btn" @click="go1">
							权限
						</view>
						<view class="cus-blue-btn" @click="go2" style="margin-left: 10px;">
							移动权限
						</view>
					</view>
				</view> -->
			</view>
		</view>
		
		<view class="suspension">
			<view class="orangeBtn FlexRow" @click="saveEditEmp">
				保存
			</view>
		</view>
		<!-- <view class="step_area step_Audit" style="padding: 10px;">
			<view class="step_btn FlexRow  style2" style="background-color: #fd7400;
    color: #fff;
    height: 50px;
    font-size: 16px;
    border-radius: 4rpx;
    line-height: 50px;
	    text-align: center;" @click="saveEditEmp">
				保存
			</view>
		</view> -->
		
		<custompop
		ref="cuspop_bmscreen"
		ptitle="选择员工"
		:ismultiple="true"
		:radioarr="JSON.stringify(empList)"
		@outputradio="DepartScreen"
		>
		</custompop>
	</view>
</template>

<script>
	import MultipleSelect from '../../pages/components/select/MultipleSelect.vue.vue';
	export default {
		components: {
			MultipleSelect
		},
		data() {
			return {
				lookUp: false,
				editUp: false,
				ctitle: '添加角色',
				// 
				role_name: '',
				role_desc: '',
				c_id: '',
				// 初始权限菜单
				auth_list: [],
				custAccId: '',
				// 已勾选的权限
				auth_ids: '',
				selectData: [],
				empList: [],
				delList: [],
				editData: {},
				acId: '',
				id: '',
				addAcIds: [],
				delAcIds: [],
				placeholder: '',
				
				// 被选中的员工列表
				selectActive: [],
			}
		},
		onLoad(e) {
			this.custAccId = uni.getStorageSync('custAccid')
			this.acId = uni.getStorageSync('acId')
		
			this.get_EmpList()
		
			this.id = e.id
			
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getPullRefresh()
		},
		methods: {
			// 下拉刷新请求数据
			getPullRefresh(){
				console.clear()
				
				this.get_EmpList()
			},
			// 批量操作
			grantRole(flag) {
				if (!this.$clickgate(1000)) return
				if (!this.auth_list.length) return
				if (this.$refs.ref_perm) {
					this.$refs.ref_perm.grantAll(flag)
				}
			},
			// 角色详情
			async findByRoleId(item) {
				console.log(item, 'item')
				const res = await uni.$api.authority.findByRoleId({
					roleId: item.id
				})
				this.id = item.id
				console.log(this.id, res.data.empList)
				this.name = res.data.role.roName
				let currEmp = item.emproles.split('、');
				this.currEmp = currEmp.map(i => {
					let info = this.empList.find(s => s.label == i);
					return info.value;
				});
				this.zjEmpRole.roName = currEmp.join(',');
				console.log('this.currEmp', this.currEmp)
				// this.zjEmpRole.roName = res.data.empList[0].empName
				this.test2()
			},
			// 保存请求
			saveAsk() {
				if (!this.$authTost(this.editUp)) return
				if (!this.auth_list.length) return
				if (!this.role_name) {
					this.$alertTost('请输入名称')
					return
				}
				if (this.$refs.ref_perm) {
					this.$refs.ref_perm.save_auth()
				}
			},
			// 点击保存
			// saveclick(resArr) {
			// 	let data = retdefdatas()
			// 	data.id = this.c_id || ''
			// 	data.name = this.role_name
			// 	data.desc = this.role_desc
			// 	data.auth_keys = resArr // 勾选的权限 键值、id
			// 	this.EditRole_Auth(data)
			// },
			// 返回
			retrpage(sand) {
				if (sand) {
					this.$store.commit('setrolefresh', false);
				}
				setTimeout(() => {
					uni.navigateBack()
				}, sand)
			},
			multipleChange(val, idx) {
				console.log('选中', val, idx)
				this.addAcIds = val
				this.delList = [];
			},
			delItem(id) {
				this.delList.push(id);
				console.log('删除', id, this.delList)
				this.delAcIds = this.delList
			},
			go1() {
				uni.navigateTo({
					url: './auth1?id=' + this.id
				})
			},
			go2() {
				uni.navigateTo({
					url: './auth2?id=' + this.id
				})
			},
			// 获取员工数据
			async get_EmpList() {
				const res = await uni.$api.authority.getEmpList({
					custAccId: this.custAccId
				})
				console.log(res, '员工数据')
				this.empList = res.data.map(i => {
					return {
						ischeck: false,
						label: i.empName,
						value: i.id,
						...i
					}
				})
				this.find_ByRoleId()
			},
			// 保存接口
			async saveEditEmp() {
				let role = {
					id: '',
					roName: '',
				}
				let data = {
					role: role,
					addAcIds: this.addAcIds,
					delAcIds: this.delAcIds
				}
				console.log(data)
				role.roName = this.role_name
				role.id = this.id
				const res = await uni.$api.authority.editEmp(this.custAccId, this.acId, data)
				console.log(res)
				if(res.code===0){
					uni.showToast({
						title:'更新成功'
					})
					setTimeout(()=>{
						uni.navigateTo({
							url:'/pagesA/pages/authority/authority'
						})
					},2000)
				}
			},
			// 查询角色详情
			async find_ByRoleId() {
				const res = await uni.$api.authority.findByRoleId({
					roleId: this.id
				})
				console.log(res, res.data.empList)
				this.editData = res.data;
				this.selectData = res.data.empList.map(i => i.id);
				this.placeholder = res.data.role.roName
				
				uni.stopPullDownRefresh()
			},
			// 筛选弹出
			SreenClick(){
				if(this.$refs.cuspop_bmscreen) {
					this.$refs.cuspop_bmscreen.pupshow = true
				}
			},
			// 保存
			DepartScreen(data){
				this.selectActive = [];
				this.empList.forEach(val => {
					data.forEach(res => {
						if(val.id == res.id) {
							val.ischeck = true;
							this.selectActive.push(val.empName);
						}
					})
				})
				// if(!this.SreenId) return
				// this.findAccountList(this.SreenId)
			},
			// 删除
			delsVal(item,index){
				console.log(item,index);
				this.empList.forEach(val => {
					if(val.empName == item) {
						val.ischeck = false;
					}
				})
				this.selectActive = this.selectActive.filter(i => i !== item)
			},
		},
	}
</script>
<style lang="scss" scoped>
	@import "./css/role.scss";
</style>